<template>
	<view class="contact-index">
		<view class="qrcode-box">
			<view class="qrcode-img">
				<u-image :src="info.url" width="100%" height="100%"></u-image>
			</view>
			<view class="font-s-18 fw-b text-c">称呼：{{info.expand1 || '-'}}</view>
			<view class="wexin-phone">
				<view class="flex-1">微信：<text class="mar-l-5">{{info.expand2 || '-'}}</text></view>
				<u-line color="#EBEBEB" direction="col" length="28"></u-line>
				<view class="flex-1">电话：<text class="mar-l-5">{{info.expand3 || '-'}}</text></view>
			</view>
			<view class="handle-btn">
				<view class="" @click="saveImage()">保存二维码</view>
				<view class="" @click="$common.makePhoneCall(info.phonenumber)">拨打电话</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {}
			}
		},
		onLoad() {
			this.getSysUserDetail()
		},
		methods: {
			getSysUserDetail(){
				this.$request({
					url: '/orderInfo/selectManageData',
					method: 'get'
				}).then(response => {
					this.info = response.data
				})
			},
			saveImage(){
				// #ifdef H5
				this.$u.toast('请长按图片保存')
				// #endif
				// #ifndef H5
				uni.showLoading({
					title:'保存图片中'
				})
				uni.downloadFile({
					url:this.info.inviteUrl, //仅为示例，并非真实的资源
					success: (res) => {
						if (res.statusCode === 200) {
							let file = res.tempFilePath;
							uni.saveImageToPhotosAlbum({
								filePath: file,
								success: () => {
									uni.hideLoading();
									this.$u.toast('保存二维码成功~')
								},
								fail: () => {
									uni.hideLoading();
									this.$u.toast('保存失败，请重试')
								}
							});
						}
					},
					fail: () => {
						uni.hideLoading();
						this.$u.toast('下载图片失败，请重试')
					}
				});
				// #endif
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contact-index {
		background-image: url('../static/img/setting/contact-header-bg.png');
		background-size: 100% 480rpx;
		background-repeat: no-repeat;
		padding: 224rpx 24rpx 48rpx;
		.qrcode-box{
			width: 100%;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 80rpx 24rpx 48rpx;
			.qrcode-img{
				border: 2rpx solid #f5f5f5;
				width: 512rpx;
				height: 512rpx;
				margin: 0 auto 32rpx;
				border-radius: 4rpx;
			}
			.wexin-phone{
				display: flex;
				color: #999999;
				margin-top: 24rpx;
				>view{
					text-align: center;
				}
			}
			.handle-btn{
				margin-top: 48rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				>view{
					width: 316rpx;
					height: 92rpx;
					background: linear-gradient( 90deg, #17C27E 0%, #29CC8B 100%);
					border-radius: 46rpx;
					text-align: center;
					line-height: 92rpx;
					color: #fff;
					font-weight: bold;
					letter-spacing: 4rpx;
					padding-left: 4rpx;
					font-size: 30rpx;
					&:last-child{
						background: linear-gradient( 90deg, #FF8533 0%, #FF9D47 100%);
					}
				}
			}
		}
	}
</style>
